<template>
  <div id="app">
    <el-cascader
        :style="'width:'+width"
        size="large"
        filterable
        :options="options"
        v-model="selectedOptions"
        @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
  name:'AreaData',
  data () {
    return {
      options: regionData,
      selectedOptions: [],
      address:''
    }
  },
  props:{
    width:{
      default:'200px',
      type:String
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      // console.log(provinceCode)
      // console.log(cityCode)
      // console.log(orgion)
      this.address = provinceCode+cityCode+orgion
      this.$emit('change',this.address)
    }
  }
}
</script>
